<template>
	<view>
		<!-- 选择点击模块 -->
		<view class="placeholder-box" @click.stop="openPopup()">
			<view class="placeholder">{{ (label ? checkInfo[label] : checkSearch) || placeholder }}{{ (label ? checkInfo[label] : checkSearch) ? unit : '' }}</view>
			<!-- 符号 -->
			<slot name="symbol">
				<view class="symbol iconfont icon-a-Frame1085"></view>
			</slot>
		</view>
		<mBottomPopup showTextBtn :showTextBtn="false" :showCloseBtn="true" @_close="showPopup = false" :title="`选择${placeholder}`" :showPopup="showPopup">
			<view class="picker-view">
				<view class="item" @click.stop="confirm(item)" :class="{active: isCheck(item)}" v-for="(item, index) in list" :key="index">
					<view class="label"> {{ label ? item[label] : item }} </view>
					<uni-icons class="uniIcons" color="#007AFF" v-if="isCheck(item)" type="checkbox-filled" size="20" />
				</view>
			</view>
		</mBottomPopup>
	</view>
</template>

<script>
/**
 * list 选择列表数据
 * label 列表中显示字段
 * value 列表中显示字段的值
 * placeholder 默认文字
 * checkInfo 选中数据
 * checkSearch 选中数据（label为空）
 * unit 单位
 *
 * */
import mBottomPopup from '@/components/m-bottom-popup/m-bottom-popup.vue';
export default {
	name: 'listSelection',
	props: {
		list: { default: () => [] },
		label: { default: 'label' },
		value: { default: 'value' },
		placeholder: { default: '请选择' },
		checkInfo: { default: () => {} },
		unit: { default: '' },
		checkSearch: { default: '' }
	},
	components: {
		mBottomPopup
	},
	data() {
		return {
			showPopup: false,
			indicatorStyle: `height: 100rpx;`,
			activeInfo: {},
			activeLabel: ''
		};
	},
	methods: {
		isCheck(item){
			let that = this;
			if(!that.showPopup) return false;
			let flag = false;
			if (that.label) {
				flag = that.activeInfo[that.label] == item[that.label];
			} else {
				flag = that.activeLabel == item;
			}
			return flag;
		},
		openPopup() {
			let that = this;
			that.showPopup = true;
			that.activeLabel = that.checkSearch;
			that.activeInfo = Object.assign({},that.checkInfo);
		},
		confirm(item) {
			let that = this;
			if (that.label) {
				that.activeInfo = item;
				that.$emit('confirm', that.activeInfo);
			} else {
				that.activeLabel = item;
				that.$emit('confirm', that.activeLabel);
			}
			that.showPopup = false;
		}
	}
};
</script>

<style lang="scss" scoped>
.placeholder-box {
	display: inline-block;
	width: 100%;
	overflow: hidden;
	font-size: 28rpx;
	color: #121317;
	font-weight: bold;
	display: flex;
	align-items: center;
	justify-content: center;
	.placeholder {
		width: 100%;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		text-align: center;
	}
	.symbol {
		transform: rotate(45deg);
		flex-shrink: 0;
		color: #858688;
		font-size: 24rpx;
	}
}
.picker-view {
	width: 100%;
	max-height: 80vh;
	min-height: 20vh;
	padding: 0 36rpx;
	box-sizing: border-box;
}
.item {
	text-align: left;
	font-size: $font-size-C;
	color: $font-color-main-A;
	padding: 32rpx 0;
	box-sizing: border-box;
	border-bottom: 2rpx solid #F9FAFC;
	width: 100%;
	font-weight: bold;
	display: flex;
	align-items: center;
	justify-content: space-between;

	&.active{
		color: $main-bg-light;
	}
	.label{
		width: 100%;
	}
	.uniIcons{
		flex-shrink: 0;
	}
}
</style>
